<template>
	<view class="OuterBg">
		<view class="user-info flex-col">
			<!-- #ifndef  H5 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar title="配送订单" :title-bold="true" :is-fixed="false" :border-bottom="false"
					:background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
					:back-icon-color="percent > 0.5 ? '#000' : '#fff'" :title-color="percent > 0.5 ? '#000' : '#fff'">
				</u-navbar>
			</u-sticky>
			<!-- #endif -->
			<u-gap height="200"></u-gap>
		</view>
		<!-- income -->
		<view class="body p-20" :style="{
			top: '-160rpx'
		}">

			<view class="top-tab item-tab">
				<view class="title flex row-left">
					<view>
						<u-line direction="col" length="30rpx" color="rgba(64, 115, 250, 1)" :hair-line="false"
							border-width="6rpx" margin="0rpx 10rpx"></u-line>
					</view>
					<text>{{$zhTran('配送')}}</text>
				</view>
				<view class="data-tab flex row-around m-t-50">
					<view>
						<view class="number">{{clwhInfo.wait_send||0}}</view>
						<view class="desc">{{$zhTran('待配送')}}</view>
					</view>
					<view>
						<view class="number">{{clwhInfo.wait_receive||0}}</view>
						<view class="desc">{{$zhTran('配送中')}}</view>
					</view>
					<view>
						<view class="number">{{clwhInfo.finish||0}}</view>
						<view class="desc">{{$zhTran('已签收')}}</view>
					</view>
				</view>
			</view>

			<view class="tabs-swiper m-t-20 m-b-20">
				<u-tabs-swiper ref="tabs" :list="tabsList" :current="tabsIndex" :is-scroll="false"
					active-color="rgba(64, 115, 250, 1)" bar-width="60" :bold="false" @change="changeCurrentTab">
				</u-tabs-swiper>
			</view>

			<view class="order-list">
				<view class="order-item-box">
					<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无数据~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
						<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
							<block v-if="currentTab['sign'] === tabItem['sign']">
								<view class="order" v-for="(orderItem, idx) in tabsList[tabIndex].list" :key="idx"
									@tap="goOrderDetail(orderItem.order_info)">
									<view class="flex row-between order-header p-b-20 m-b-20">
										<view class="sn flex">
											<u-avatar :src="$getImageUri('resource/image/shopapi/clwh/logo.png')"
												size="36" class="m-r-10 m-t-5"></u-avatar>
											<text>{{$zhTran('订单编号：')}}{{orderItem.order_info.sn}}</text>
										</view>
										<view :class="[
										'status',
										`status--${orderStatus[orderItem.order_info.order_status]['style']}`
									]">{{orderItem.order_info.order_status_desc}}</view>
									</view>

									<!-- Order Main -->
									<view class="order-main">
										<goods-card v-for="(goodsItem, goodsIndex) in orderItem.order_goods"
											:key="goodsIndex" shape="rectangle" :name="goodsItem.goods_name"
											:image="goodsItem.goods_image"
											:contain-style="{ 'border-raius': 0, 'height': '330rpx' }"
											:image-style="{ 'width': '180rpx', 'height': '180rpx' }">
											<view class="flex-1" slot="default">
												<view class="xs m-t-10" v-if="order_extend.show_order_list_goods_tag">
													<u-image width="80rpx" height="40rpx" :src="goodsItem.tag_desc"
														v-if="goodsItem.tag_desc != ''" />
												</view>
												<text class="muted xs m-t-10">{{ goodsItem.spec_value_str }}</text>
												<view class="xs m-t-10" v-if="order_extend.show_order_list_goods_code"
													:style="{
											color: order_extend.order_list_goods_code_color
										}">{{$zhTran('编码：')}}{{ goodsItem.code == null ? '' : goodsItem.code }}</view>
												<view class="xs m-t-10" v-if="order_extend.show_order_list_goods_model"
													:style="{
											color: order_extend.order_list_goods_model_color
										}">{{$zhTran('型号：')}}{{ goodsItem.goods_model == null ? '' : goodsItem.goods_model }}</view>
												<view class="m-t-10 flex row-between">
													<price
														v-if="orderItem.order_info.order_type == 0 || orderItem.order_info.order_type == 4"
														:content="goodsItem.original_price" mainSize="32rpx"
														minorSize="24rpx" :prefix="order_extend.price_symbol" />
													<price v-else :content="goodsItem.goods_price" mainSize="32rpx"
														minorSize="24rpx" :prefix="order_extend.price_symbol" />
													<text class="lighter sm">x{{ goodsItem.goods_num }}</text>
												</view>
											</view>
										</goods-card>
										<view class="order-desc">
											<text>{{$zhTran('共 '+orderItem.order_info.total_num +' 件商品,订单总金额:')}}</text>
											<price :content="orderItem.order_info.order_amount"
												:prefix="order_extend.price_symbol" color="rgba(238, 10, 37, 1)"
												font-weight="bold" main-size="36rpx" minor-size="20rpx" />
										</view>
										<view class="order-desc">
											<text>{{$zhTran('分润金额:')}}</text>
											<price :content="orderItem.profit" :prefix="order_extend.price_symbol"
												color="rgba(238, 10, 37, 1)" font-weight="bold" main-size="36rpx"
												minor-size="20rpx" />
										</view>
									</view>

									<!-- Order Footer -->
									<view class="order-footer flex row-between">
										<view class="flex">
											<u-avatar :src="orderItem.order_info.user_avatar" size="36"
												class="m-r-10 m-t-5"></u-avatar>
											<text>{{orderItem.order_info.user_nickname}}</text>
										</view>
										<view>
											<view :class="[
												'order-button',
												`order-button--primary`
											]" v-if="orderItem.order_info.order_status == 1"
												@click.native.stop="deliverySend($event,orderItem.order_info)">
												{{$zhTran('发货')}}
											</view>
											<view :class="[
												'order-button',
												`order-button--muted`
											]" v-if="orderItem.order_info.order_status == 3"
												@click.native.stop="deliveryUpdate($event,orderItem.order_info)">
												{{$zhTran('变更')}}
											</view>
										</view>
									</view>
								</view>
							</block>
						</block>
					</mescroll-uni>
				</view>
			</view>
		</view>

		<u-popup v-model="deliveryShow" :closeable="true" :maskCloseAble="false" mode="center" border-radius="14">
			<view class="p-24 bg-white" style="width: 70vw;">
				<view class="m-b-30 xl text-center">{{$zhTran(editType?'变更':'发货')}}</view>
				<form @submit="deliveryConfirm">
					<u-form-item :label="$zhTran('配送快递')" :labelWidth="130">
						<input style="height: 60rpx;" class="nr" type="select" :value="express_desc" name="express_id"
							:placeholder="$zhTran('请选择快递公司')" @click="selectShow=true">
						</input>
					</u-form-item>
					<u-form-item :label="$zhTran('快递单号')" :labelWidth="130">
						<input style="height: 60rpx;" class="nr" :value="invoice_no" name="invoice_no"
							:placeholder="$zhTran('请输入快递单号')">
						</input>
					</u-form-item>
					<view class="flex row-between">
						<button class="btn flex br60 row-center"
							style="width: 50%;background-color: rgba(64, 115, 250, 1);color: #fff;"
							form-type="submit">{{$zhTran('确定')}}</button>
						<button class="btn flex br60 row-center" style="width: 50%;"
							@click="closePopu">{{$zhTran('取消')}}</button>
					</view>
				</form>
			</view>
		</u-popup>

		<u-select v-model="selectShow" :confirm-color="themeColor" cancel-color="#999" @confirm="valueChange($event)"
			:list="order_extend.express"></u-select>
	</view>
</template>

<script>
	import {
		apiCloudWarehouseInfo,
		apiCloudWarehouseOrderList,
		apiCloudWarehouseOrderDelviery
	} from "@/api/cloud_warehouse"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				clwhInfo: {},
				percent: 0,
				orderStatus: {
					1: {
						style: 'warning',
					},
					2: {
						style: 'primary',
					},
					3: {
						style: 'info',
					},
				},
				tabsList: [{
					sign: 'wait_send',
					name: this.$zhTran('待发货'),
					count: '',
					list: [],
				}, {
					sign: 'wait_receive',
					name: this.$zhTran('已发货'),
					count: '',
					list: [],
				}, {
					sign: 'finish',
					name: this.$zhTran('已完成'),
					count: '',
					list: [],
				}],
				tabsIndex: '0',
				order_extend: {
					show_order_list_goods_code: 0,
					order_list_goods_code_color: '',
					show_order_list_goods_model: 0,
					order_list_goods_model_color: '',
					show_order_list_goods_tag: 0,
					express: []
				},
				send_order_id: '',
				express_id: '',
				express_desc: '',
				invoice_no: '',
				selectShow: false,
				deliveryShow: false,
				editType: 0
			}
		},
		computed: {
			currentTab() {
				return this.tabsList[this.tabsIndex] || {}
			},
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},
		methods: {
			getCloudWarehouseInfo() {
				apiCloudWarehouseInfo().then(res => {
					this.clwhInfo = this.$zhTran(res);
				})
			},
			changeCurrentTab(index) {
				this.tabsIndex = index
				this.refreshOrderData()
			},
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 初始化Mescroll
			mescrollInit(mescroll) {
				console.log(mescroll);
				this.mescroll = mescroll;
			},
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				const sign = this.currentTab.sign
				apiCloudWarehouseOrderList({
					order_type: sign,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					count,
					extend
				}) => {
					const tab = this.mapTabsItem(sign)
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					this.order_extend = extend
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			onPageScroll(e) {
				const top = uni.upx2px(100)
				const {
					scrollTop
				} = e
				this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			},

			// 去订单详情
			goOrderDetail(row) {
				this.$Router.push({
					path: '/bundle3/pages/cloud_warehouse/order/order_detail',
					query: {
						order_id: row.id,
						order_user: row.user_id,
						clwh_id: this.clwhInfo.id
					}
				})
			},
			deliverySend(e, row) {
				e.preventDefault(); // 阻止事件冒泡穿透
				this.send_order_id = row.id
				this.deliveryShow = true
			},
			deliveryUpdate(e, row) {
				e.preventDefault(); // 阻止事件冒泡穿透
				this.send_order_id = row.id
				this.deliveryShow = true
				this.editType = 1
			},
			valueChange(e) {
				this.express_id = e[0].value
				this.express_desc = e[0].label
			},
			closePopu() {
				this.editType = 0
				this.send_order_id = ''
				this.express_id = ''
				this.invoice_no = ''
				this.deliveryShow = false
			},
			async deliveryConfirm(e) {
				let send_type = 2,
					invoice_no = e.detail.value.invoice_no
				if (invoice_no && this.express_id) {
					send_type = 1
				}
				await apiCloudWarehouseOrderDelviery({
					send_type,
					invoice_no,
					express_id: this.express_id,
					id: this.send_order_id,
					clwh_id: this.clwhInfo.id,
					editType: this.editType
				}).finally(() => {
					this.getCloudWarehouseInfo()
					this.refreshOrderData();
				})

				this.deliveryShow = false;
			},
		},
		onShow() {
			this.getCloudWarehouseInfo()
			this.refreshOrderData()
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		background-color: rgba(64, 115, 250, 1);
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		&.u-skeleton-rect {
			height: 518rpx;
		}
	}

	.body {
		position: relative;

		.top-tab {
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.item-tab {
			margin-bottom: 30rpx;
			position: relative;


			.title {
				color: rgba(47, 47, 47, 1);
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.data-tab {
				padding: 0 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				text-align: center;

				.number {
					color: rgba(58, 58, 58, 1);
					font-size: 38rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.desc {
					color: rgba(128, 128, 128, 1);
					font-size: 26rpx;
				}
			}
		}
	}


	.order-list {
		flex: 1;
		min-height: 0;
		position: relative;

		.order-item-box {
			height: calc(100% - 80rpx - constant(safe-area-inset-bottom));
			height: calc(100% - 80rpx - env(safe-area-inset-bottom));

			.order {
				background-color: #fff;
				border-radius: 6rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;

				&-header {
					border-bottom: 1px solid rgba(241, 241, 241, 1);

					.sn {
						font-size: 26rpx;
					}

					.status {
						border-radius: 6rpx;
						padding: 10rpx;

						&--warning {
							color: rgba(255, 141, 26, 1);
							background-color: rgba(255, 240, 224, 1);
						}

						&--primary {
							background-color: rgba(242, 246, 255, 1);
							color: rgba(64, 115, 250, 1);
						}

						&--info {
							color: rgba(159, 159, 159, 1);
							background-color: rgba(241, 241, 241, 1);
						}
					}
				}

				&-main {
					.order-desc {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding: 10rpx 20rpx;
						font-size: $-font-size-xs;
						color: $-color-muted;
					}
				}

				&-footer {
					height: 100rpx;
					padding-right: 20rpx;
					border-top: $-solid-border;

					.order-button {
						box-sizing: border-box;
						padding: 10rpx 45rpx;
						border-radius: 60px;
						font-size: $-font-size-nr;

						&:nth-child(n+2) {
							margin-left: 20rpx;
						}

						&--primary {
							background-color: rgba(64, 115, 250, 1);
							color: #FFFFFF;
						}

						&--muted {
							border: $-solid-border;
							color: $-color-lighter;
						}
					}
				}
			}
		}
	}
</style>